<!--
 * @Author: ckk
 * @Date: 2022-10-20 17:49:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-08 14:46:29
 * @Description: 个人中心页面
-->
<template>
  <div class="head">
    <img src="@/assets/images/user/mine-topbg.png" alt="" class="top-bg"/>
    <div class="nav">我的</div>
    <div class="head-content">
      <div class="user-info">
        <div class="use-info-item">
          <img alt="" :src="`/gw/ucsapi/head_photo/user/${userInfo.studentNumber}/${size}`" class="avatar-img" @click="goInfo()"/>
          <div class="student-info">
            <p class="name">{{getDecode(userInfo.realName)}}</p>
            <p class="school">{{userInfo.schoolName}}</p>
            <p class="class-name">{{userInfo.gradeName + userInfo.className}}</p>
          </div>
        </div>
        <div class="sign-in">
          <button v-show="!isSingnStutas"  @click="changeSignStatus()">签到</button>
          <button v-show="isSingnStutas">已签到</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import aes from '@/utils/aes';
import { externalLinkServices } from '@/api';
export default {
  data () {
    return {
      isSingnStutas: 0,
      size: 100
    };
  },
  props: {
    userInfo: {
        type: Object
    },
    isSingn: {
      type: Number
    }

  },
  watch: {
    isSingn: function (val) {
      this.isSingnStutas = val;
    }
  },
  created () {
    this.isSingnStutas = this.isSingn;
  },
  methods: {
    goInfo () {
      window.location.href = externalLinkServices.userInfolLink;
    },
    getDecode (name) {
      if (name) {
        return aes.decode(name) || '';
      } else {
        return '';
      }
    },
    changeSignStatus () {
      this.$emit('changeSignStatus');
    }
  }
};
</script>
<style lang="scss" scoped>
.user {
  .nav {
    width: 100%;
    position: absolute;
    left: 0;
    top: 15px;
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Medium, sans-serif;
    color: #ffffff;
  }
  .head {
    position: relative;
    .top-bg {
      width: 100%;
      height: auto;
      display: block;
    }
    .head-content {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      .user-info {
        width: 350px;
        box-sizing: border-box;
        min-height: 98px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0px 4px 4px 0px rgba(33, 40, 50, 0.04);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
      }
      .use-info-item {
        display: flex;
        align-items: center;
      }
      .avatar-img {
        width: 68px;
        height: 68px;
        border-radius: 50%;
      }
      .student-info {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular, sans-serif;
        font-weight: 400;
        text-align: left;
        color: rgba(0, 0, 0, 0.45);
        line-height: 26px;
        margin-left: 12px;
        .name {
          font-size: 18px;
          font-family: PingFang SC, PingFang SC-Medium, sans-serif;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      .sign-in {
        button {
          border:0;
          background: rgba(41,192,123,0.13);
          font-size: 16px;
          font-family: PingFangSC-Regular, sans-serif;
          text-align: center;
          color: #4ac98f;
          border-radius: 16px;
          padding:6px 12px;
        }
      }
    }
  }
}
</style>
